import React from "react";
import { MainLayout } from "../components";

import {
  HomeOutlined,
  SettingOutlined,
  UnorderedListOutlined,
  TableOutlined,
} from "@ant-design/icons";

const Home = React.lazy(() => import("../views/home"));
const Set = React.lazy(() => import("../views/set"));
const List = React.lazy(() => import("../views/list"));
const Table = React.lazy(() => import("../views/table"));
const Login = React.lazy(() => import("../views/login"));

export interface RouterRowState {
  path: string;
  element: JSX.Element;
  label?: string;
  icon?: JSX.Element;
  roles?: string[];
  hidden?: boolean;
}

export const ROUTER_LIST: RouterRowState[] = [
  {
    path: "/",
    element: (
      <MainLayout>
        <Home></Home>
      </MainLayout>
    ),
    label: "首页",
    icon: <HomeOutlined />,
  },
  {
    path: "/list",
    element: (
      <MainLayout>
        <List></List>
      </MainLayout>
    ),
    label: "列表",
    icon: <UnorderedListOutlined />,
  },
  {
    path: "/table",
    element: (
      <MainLayout>
        <Table></Table>
      </MainLayout>
    ),
    label: "图表",
    icon: <TableOutlined />,
    roles: ["test", "admin"],
  },
  {
    path: "/set",
    element: (
      <MainLayout>
        <Set></Set>
      </MainLayout>
    ),
    label: "设置",
    icon: <SettingOutlined />,
    roles: ["admin"],
  },
  {
    path: "/login",
    element: <Login></Login>,
    label: "登录",
    icon: <SettingOutlined />,
    hidden: true,
  },
];
